<template>
  <div class="contain">
    <canvas-card :itemData="itemData"></canvas-card>
    <button @click.stop="prev">👈</button>
    <button @click.stop="next">👉</button>
    <div>{{ parameter.cardTypeList[itemData.type] }} No:{{ cardNo + 1 }}</div>
    <button @click.stop="jump('-1')">返回</button>
  </div>
</template>
<script>
import helper from "../../service/helper.js";
import parameter from "../../service/state.js";
import canvasCard from "../../components/canvasCard.vue";
export default {
  data() {
    return {
      itemData: {},
      cardNo: 0,
      maxNum: 0,
      parameter,
    };
  },
  components: {
    canvasCard,
  },
  methods: {
    loadCards() {
      if (!JSON.parse(localStorage.getItem("cards"))) {
        alert("未加载数据");
        this.$router.push({
          path: "excel",
        });
        return;
      }
      this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
      this.maxNum = JSON.parse(localStorage.getItem("cards")).length;
    },
     jump(url, data) {
      if (url && (url == "-1")) {
        this.$router.back(-1);
      } else {
        this.$router.push({ path: url, query: data });
      }
     },
       next() {
      if (this.cardNo + 1 == this.maxNum) return;
      console.log("下一个");
      this.cardNo++;
      // this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
    prev() {
      if (this.cardNo == 0) return;
      console.log("上一个");
      this.cardNo--;
      // this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
  },
  watch: {
     cardNo(newNo, oldNo) {
      this.itemData = JSON.parse(localStorage.getItem("cards"))[this.cardNo];
    },
  },
  mounted(){
    this.loadCards();
  },
};
</script>
<style scoped lang="less">
// .contain{
//   height: calc(~"100vh - 206px");
// } 
</style>